<!--  -->
<template>
    <div>
   
        表格二次封装使用
        <EleTtable @selectionChange="selectionChange" v-bind="tableConfig">
            <template #action="{row}">
                <el-button type="primary" @click="handleDelete(row.id)">删除</el-button>
            </template>
        </EleTtable>
    </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import EleTtable, { ColumnType, TableProp } from '../../components/table/EleTtable.vue';
import { columns } from './columns';
 



const tableConfig = reactive<TableProp>({
    hasSelection:true,
    data: [],
    total:0,
    columns
})

//删除
const handleDelete = (id: number) => {

    alert(id);

}

const selectionChange=(e:any)=>{

    console.log("父组件接受到选择中的数据",e);
    

}

const getData = () => {
    //调接口返回数据

    const res = [
        {
            id:1,
            date: '2016-05-03 10:20:30',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            pic: 'http://123.57.237.81:8080/edu/upload/2025/5/12/20250512112940147.png'
        },
        {  id:2,
            date: '2016-05-02 10:20:31',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            pic: 'http://123.57.237.81:8080/edu/upload/2025/5/12/20250512112940147.png'
        },
        {
            id:3,
            date: '2016-05-04 10:20:32',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            pic: 'http://123.57.237.81:8080/edu/upload/2025/5/12/20250512112940147.png'
        },
        {
            id:4,
            date: '2016-05-01 10:20:33',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            pic: 'http://123.57.237.81:8080/edu/upload/2025/5/12/20250512112940147.png'
        },
    ]
    tableConfig.data = res;
    tableConfig.total=30;

}
getData();

</script>
<style scoped></style>